<template>
  <div id="page-search-result" class="container">
    <div class="search-wrap">
      <div class="search-box">
        <div class="search">
          <div class="input-wrap"
               :style="{borderBottomLeftRadius:activeSearchHistory.length>0&&searchHistoryShow?'0':'4px'}">
            <i class="icon-search"></i>
            <input name="search-input"
                   type="text"
                   @blur="inputSearchBlur"
                   placeholder="请输入要搜索的内容"
                   v-model="inputSearch"
                   @click="clickInputSearch"
                   @keyup.enter="updateQuery(searchMethod)"
                   @keyup="inputKeyup"
                   autocomplete="off"
                   ref="search-input"
            >
            <ul id="query-search" v-if="activeSearchHistory.length>0&&searchHistoryShow">
              <li :key="item.key"
                  v-for="(item,index) in activeSearchHistory"
                  :class="{active:index==searchHistoryIndex}"
                  @mousedown="searchHistoryClick(item.text)"
                  @mouseover="searchHistoryMouseover(index)"
              >
                {{ item.text }}
              </li>
              <li style="text-align: right" @click="clearRecord">清除记录</li>
            </ul>
          </div>
          <div @click="updateQuery(1)" class="btn btn-search-title">搜索标题</div>
          <div @click="updateQuery(2)" class="btn btn-search-all">搜索全文</div>
          <div class="btn-screen" ref="btn-screen" @click="switchScreen">
            筛选 <i class="el-icon-arrow-up" ref="btn-screen-icon"></i>
          </div>
          <div @click="clearSearchCondition" class="clear-search-condition">
            清空选项
          </div>
        </div>
        <div class="keywords" v-show="$store.state.searchResultType==1">
                    <span v-if="searchKeywords">
                        <span>关键字：</span> <span class="high-light">{{ searchKeywords.substr(0, 38) }}</span>
                        {{ searchMethod == 1 ? '标题检索' : searchMethod == 2 ? '全文检索' : '' }}
                    </span>
          <span v-if="listPageTotal!==null">共找到 <span class="high-light">{{ listPageTotal }}</span> 条内容</span>
        </div>
      </div>
    </div>
    <div class="screen-condition-wrap" ref="screen-condition-wrap">
      <div class="screen-condition">
        <div class="condition-title">采购方式：</div>
        <ul class="screen-condition-list purchase-method">
          <li
            v-for="(item,index) in purchaseOptions"
            :key="item"
            :class="{active:choosePurchaseIndex.includes(index)}"
            @click="screenChooseSingle(1,index)">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="screen-condition">
        <div class="condition-title">公告类型：</div>
        <ul class="screen-condition-list announcement">
          <li
            v-for="(item,index) in announcementOptions"
            :key="item"
            :class="{active:chooseAnnouncementIndex.includes(index)}"
            @click="screenChooseSingle(2,index)">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="screen-condition time">
        <div class="condition-title">时间：</div>
        <ul class="screen-condition-list time">
          <li
            v-for="(item,index) in dateOptions"
            :key="item.range"
            :class="{active:chooseDateIndex==index}"
            @click="screenChooseSingle(3,index,item.range)">
            {{ item.text }}
          </li>
          <li class="date-picker-wrap">
            <el-date-picker
              popper-class="search-result-date-picker-1"
              v-model="inputDateRange"
              :clearable="false"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="—"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </li>
          <li class="active confirm-date" @click="requestQueryBid(searchMethod,true,true)">确定</li>
        </ul>
      </div>
      <div class="screen-condition">
        <div class="condition-title">总金额：</div>
        <ul class="screen-condition-list money">
          <li
            v-for="(item,index) in moneyOptions"
            :key="item.text"
            :class="{active:chooseMoneyIndex==index}"
            @click="screenChooseSingle(5,index,item.range)">
            {{ item.text }}
          </li>
          <li class="money-custom">
            <input type="text"
                   name="min-fee"
                   v-model="customInputMoneyRange[0]"
                   placeholder="最小金额"
                   autocomplete="off"
            >
            —
            <input type="text"
                   name="max-fee"
                   v-model="customInputMoneyRange[1]"
                   placeholder="最大金额"
                   autocomplete="off"
            >
            万元
          </li>
          <li class="active confirm-date" @click="customMoney">确定</li>
        </ul>
      </div>
      <div class="screen-condition select-region">
        <div class="condition-title">地域：</div>
        <div class="select-region-wrap">
          <span :class="{active:regionList.length===0}" @click="selectAllRegion" class="all">全国</span>
          <el-select @change="provinceChange"
                     filterable
                     placeholder="省"
                     style="width: 110px;height: 26px;"
                     v-model="selectProvince"
          >
            <el-option
              :disabled="item.disabled"
              :key="item.key"
              :label="item.value"
              :value="item.value"
              v-for="item in provinceList">
            </el-option>
          </el-select>
          <el-select @change="cityChange"
                     filterable
                     placeholder="市"
                     style="width: 110px;height: 26px;margin-left: 26px;"
                     v-model="selectCity"
          >
            <el-option
              :disabled="item.disabled"
              :key="item.key"
              :label="item.value"
              :value="item.value"
              v-for="item in cityList">
            </el-option>
          </el-select>
          <!--                    <i @click="addRegion" class="icon icon-plus"></i>-->
          <button @click="addRegion" class="add-condition">添加条件</button>
          <span :key="item.code" class="btn-keywords-item" v-for="(item,index) in regionList">
                        {{ item.regionName }}
                        <i @click="deleteRegion(index,item.regionLevel,item.regionCode)"
                           class="icon icon-delete-keywords el-icon-close">
                        </i>
                    </span>
        </div>
      </div>
      <div class="screen-condition select-item">
        <div class="condition-title">品目：</div>
        <ul class="screen-condition-list item">
          <li
            :class="{active:chooseFirstItemIndex==index}"
            :key="item.id"
            @click="screenChooseSingle(6,index)"
            v-for="(item,index) in itemTop2List">
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
      <div class="screen-condition select-item">
        <div class="condition-title"></div>
        <ul class="screen-condition-list item">
          <li
            :class="{active:chooseSecondItemIndex.includes(index)}"
            :key="item.id"
            @click="screenChooseSingle(7,index)"
            v-for="(item,index) in secondItemList">
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="search-result-wrap" ref="search-result-wrap">
      <div class="top" v-if="searchResultList.length!==0">
        <ul class="content-nav">
          <li :class="{active:searchSort==2}" @click="searchSortMethod(2)">时间</li>
          <li :class="{active:searchSort==3}" @click="searchSortMethod(3)">
            <span>中标金额</span>
          </li>
          <li :class="{active:searchSort==4}" @click="searchSortMethod(4)">
            <span>预算金额</span>
          </li>
          <li :class="{active:searchSort==1}" @click="searchSortMethod(1)"
              v-if="$store.state.searchResultType==1">相似度
          </li>
        </ul>
        <div class="data-export" v-if="searchPageType==1||searchPageType==2"
             @click="exportSubscribeMessage(searchPageType)">
          导出标讯
        </div>
      </div>

      <ul class="search-result"
          v-loading="loading"
          element-loading-text="拼命加载中...">
        <li class="no-result" v-if="!loading&&searchResultList.length===0&&$store.state.searchResultType==1">
          <p>暂无结果</p>
        </li>
        <li class="no-result" v-if="searchResultList.length===0&&$store.state.searchResultType==2">
          <p>当前没有订阅的标讯信息</p>
          <!--<p @click="displaySubscriber">
              <i class="icon icon-subscriber"></i>
              <span>订阅器</span>
          </p>-->
        </li>
        <li class="no-result" v-if="searchResultList.length===0&&$store.state.searchResultType==3">
          <p>当前没有收藏的标讯信息</p>
          <p @click="tabPageType(1)"><i class="icon icon-heart"></i><span>去收藏</span></p>
        </li>
        <li v-for="(item,index) in searchResultList"
            :key="item.id"
        >
          <div :class="{active:item.isAttention}" @click="collection(index,item.id,item.isAttention)"
               class="collection">
            <i class="icon-heart"></i>
            <span>收藏</span>
          </div>
          <div class="title">
            <nuxt-link :to="'/detail/'+item.id" target="_blank" title="点击查看详情"
                       v-html="item.title"></nuxt-link>
          </div>
          <ul class="tags-list">
            <li class="item tag-color-1" v-if="item.announcementTypeName">
              {{ item.announcementTypeName }}
            </li>
            <li class="item tag-color-1" v-if="item.purchaseTypeName">
              {{ item.purchaseTypeName }}
            </li>
            <li class="item tag-color-2" v-if="item.province">
              {{ item.province }}
            </li>
            <li class="item tag-color-2" v-if="item.purchaserName">
              {{ item.purchaserName }}
            </li>
            <li class="item tag-color-3" v-for="item2 in item.esItemAis" :key="item2.item1Code"
                v-show="item2.item1Name">
              {{ item2.item1Name }}
            </li>
            <li class="item tag-color-4" v-if="item.bidMoney">
              中标 {{ item.bidMoney / 1000000 + '万元' }}
            </li>
            <li class="item tag-color-4" v-if="item.budgetMoney">
              预算 {{ item.budgetMoney / 1000000 + '万元' }}
            </li>
          </ul>
          <div class="content" v-if="searchMethod==1">
            {{ item.projectInfo }}
          </div>
          <div class="content" v-if="searchMethod==2" v-html="item.pureContent">
          </div>
          <div class="content-keywords">
            <span class="date" v-if="item.projectDate">公告日期：{{ item.projectDate.substring(0, 10) }}</span>
            <span class="company winning-bidder" v-if="item.agencyName">{{ item.agencyName }}</span>
            <span class="company purchaser" v-if="item.companyName">{{ item.companyName }}</span>
          </div>
        </li>
      </ul>

      <div class="pagination-wrap" v-if="searchResultList.length>0">
        <el-pagination
          class="search-result-pagination"
          @current-change="handleCurrentChange"
          background
          :current-page="Number(listPageNum)"
          :page-size="listPageSize"
          :pager-count="11"
          layout="prev, pager, next"
          :total="listPageTotal"
          prev-text="< 上一页"
          next-text="下一页 >"
        >
        </el-pagination>
      </div>
    </div>
    <dialog-box
      v-if="cancelCollectionShow"
      @closeDialogBox="closeDialogBox"
      cancel-text="再想想"
      confirm-text="取消收藏"
      sign-text="是否取消收藏这条标讯信息？"
    >
    </dialog-box>
    <dialog-box
      v-if="openMemberDialogShow"
      @closeDialogBox="closeMemberDialogBox"
      cancel-text="否"
      confirm-text="是"
      cancel-text-color="#686767"
      confirm-text-color="#F67B14"
      sign-text="此功能为会员专属，是否去开通？"
    >
    </dialog-box>
  </div>
</template>

<script>
import {request} from "../plugins/httpSever"
// import jiami from "../plugins/jiami.js"
// import {addStyle} from "../plugins/font.js"

export default {
  asyncData(context) {
    // Universal keys
    const {
      app,
      store,
      route,
      params,
      query,
      env,
      isDev,
      isHMR,
      redirect,
      error,
      $config,
      $axios
    } = context;
    // Server-side
    if (process.server) {
      const {req, res, beforeNuxtRender} = context;
    }
    // Client-side
    if (process.client) {
      const {from, nuxtState} = context;
    }

    const promise1 = new Promise((resolve, reject) => {
      request.searchCondition().then(res => {
        if (res.status == 200) {
          res.data.announcements.unshift('全部');
          res.data.purchase.unshift('全部');
          res.data.provinces.unshift('全部');
          res.data.purchaser.unshift('全部');

          resolve({
            announcementOptions: res.data.announcements,
            purchaserOptions: res.data.purchaser,
            purchaseOptions: res.data.purchase
          })
        } else {
          reject(res.message)
        }

      }, err => {
        console.log(err);
        reject(err)
      });
    })

    const promise2 = new Promise((resolve, reject) => {
      // 请求加密key
      request.querySignParam().then(res => {
        // if (res.status !== 200) return
        let dataTemp = res.data
        // 获取加密key和时间戳
        let pageNumSign = jiami.AES_jiami((query.page ? Number(query.page) - 1 : 0).toString(), dataTemp.key)
        let temp = pageNumSign + '10' + dataTemp.timestamp + dataTemp.salt
        let sign = jiami.MD5_jiami(temp.toString())
        if (!query.type || query.type == 1) {
          const searchData = {
            queryText: query.keyword || null,
            purchaseTypeNameList: [],
            announcementTypeNameList: [],
            startTime: null,
            endTime: null,
            lowBidMoney: null,
            highBidMoney: null,
            regionList: [],
            level2ItemCodeList: null,
            sort: query.sort || 2,
            pageNum: query.page ? Number(query.page) - 1 : 0,
            pageSize: 10,
            pageNumSign: pageNumSign,   // 加密后的pageNum
            sign: sign,  // 加密后的参数
            timestamp: dataTemp.timestamp,  // 时间戳
          }
          request.queryBidTitle(searchData).then(res => {//标题搜索
            console.log('asyncData请求标讯数据', res);
            if (res.status == 200) {
              if (res.data) {
                resolve({
                  searchResultList: res.data.content,
                  listPageTotal: res.data.totalElements
                })
              } else {
                resolve({})
              }
            } else {
              reject(res.message)
            }
          }, err => {
            console.log(err);
            reject(err);
          })
        } else {
          resolve({})
        }
      })
    })
    return Promise.allSettled([promise1, promise2]).then(res => {
      const returnRes = {};
      res.forEach(item => {
        if (item.status == 'fulfilled') {
          Object.assign(returnRes, item.value)
        }
      })
      return returnRes;
    }, err => {
      return {}
    });
  },
  head() {
    const urlQuery = this.$route.query;
    let title = '全部';
    if (!urlQuery.type || urlQuery.type == 1) {
      title = urlQuery.keyword || title;
    } else if (urlQuery.type == 2) {
      title = '我的订阅';
    } else if (urlQuery.type == 3) {
      title = '我的收藏';
    }
    return {
      title: title + ' - 搜索结果' + this.utils.defaultTitleEnd,
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: `${urlQuery.keyword},${urlQuery.keyword}-搜索结果,标讯搜索,易找标,正福易找标,易找标${this.utils.defaultTitleEnd}`
        }
      ]
    }
  },
  data() {
    return {
      title: '哈哈哈',
      loading: false,
      cancelCollectionShow: false,
      openMemberDialogShow: false,
      searchPageType: 1,//1、搜索 2、我的订阅搜索 3我的收藏搜索
      inputSearch: '',//输入内容
      searchHistoryShow: false,
      searchHistory: [],
      searchHistoryIndex: -1,
      searchMethod: 1,//1标题搜索、2全文搜索
      searchKeywords: '',//搜索关键字
      searchResultList: [],//搜索结果
      listPageNum: 1,//当前页
      listPageSize: 10,//单页数据数
      listPageTotal: null,//总数据数量
      searchSort: 2,//排序方式，1相似度排序；2时间排序；3标的金额排序；4预算金额排序；5id倒序
      announcementOptions: [],//公告类型
      purchaseOptions: [],//采购方式
      purchaserOptions: [],
      dateOptions: [
        {
          text: '全部',
          range: -1
        },
        {
          text: '今日',
          range: 0
        },
        {
          text: '近3日',
          range: 3
        },
        {
          text: '近1周',
          range: 7
        },
        {
          text: '近1月',
          range: 30
        },
        {
          text: '近3月',
          range: 90
        },
        {
          text: '近半年',
          range: 180
        }
      ],
      pickerOptions: {
        disabledDate: (time) => {
          return (function (time) {
            var times = Date.now();
            return time.getTime() > times;
          })(time);
        }
      },
      moneyOptions: [
        {
          text: '不限',
          range: []
        },
        {
          text: '100万以下',
          range: [0, 100]
        },
        {
          text: '100-500万',
          range: [100, 500]
        },
        {
          text: '500-1000万',
          range: [500, 1000]
        },
        {
          text: '1000-5000万',
          range: [1000, 5000]
        },
        {
          text: '5000万-1亿',
          range: [5000, 10000]
        },
        {
          text: '1亿以上',
          range: [10000, null]
        }
      ],
      choosePurchaseIndex: [0],
      chooseAnnouncementIndex: [0],
      chooseProvincesIndex: 0,
      choosePurchaserIndex: 0,
      chooseDateIndex: 0,
      chooseMoneyIndex: 0,
      inputDateRange: [],//筛选日期区间
      inputMoneyRange: [],//筛选金额区间
      customInputMoneyRange: [],//自定义输入金额区间
      selectProvince: '',
      selectProvinceCode: '',
      provinceList: [],
      selectCity: '',
      selectCityCode: '',
      cityList: [],
      regionList: [],//选择/添加的地区列表
      itemTop2List: [],//钱2级品目列表
      chooseFirstItemIndex: 0,//选择的第一级品目的index
      secondItemList: [],//选择的二级品目列表
      chooseSecondItemIndex: [0],//选择的第二级品目的index
      switchScreenOpen: true,//是否展开/收起筛选条件
      preCancelBidIndex: 0,//当前选中取消收藏的标讯index
      preCancelBidId: '',//当前选中取消收藏的标讯id
      //pageNumSign: '',//AES加密后的值
    }
  },
  mounted() {
    this.searchPageType = this.$route.query.type || this.$route.query.searchPageType || this.searchPageType;
    this.$store.commit('changeSearchResultType', this.searchPageType);

    this.inputSearch = this.$route.query.keyword || this.$route.query.inputSearch || this.inputSearch;
    this.searchMethod = this.$route.query.method ? this.$route.query.method : this.searchMethod;
    this.listPageNum = this.$route.query.page || this.listPageNum;
    this.searchSort = this.$route.query.sort || this.searchSort;

    this.searchHistory = JSON.parse(localStorage.getItem('searchHistory')) ? JSON.parse(localStorage.getItem('searchHistory')) : [];

    this.$request.searchRegion({
      level: 1
    }).then(res => {
      console.log(res);
      if (res.status == 200) {
        this.provinceList = res.data.filter(item => {
          let regExp = new RegExp(/香港|澳门|台湾/);
          return !regExp.test(item.value);
        });
      } else {
        this.requestError(res.status, res.message);
      }
    }, err => {
      console.log(err);
      this.requestFail(err);
    });

    this.$request.listTop2LevelItem().then(res => {
      console.log(res);
      if (res.status == 200) {
        res.data.forEach(item => {
          item.children.unshift({
            code: item.code + '00',
            id: item.code + item.id,
            parentCode: item.code,
            name: '全部'
          });
        });
        res.data.unshift({id: 0, code: "0", name: "全部", level: 1, children: []});
        this.itemTop2List = res.data;
        this.secondItemList = res.data[0].children;
      } else {
        this.requestError(res.status, res.message);
      }
    }, err => {
      console.log(err);
      this.requestFail(err);
    });

    if (this.searchPageType != 1) {
      this.requestQueryBid(this.searchMethod);
    }
    addStyle()
  },
  destroyed() {
    this.$store.commit('changeSearchResultType', 1);
  },
  computed: {
    activeSearchHistory() {
      return this.searchHistory.slice(0, 10);
    }
  },
  watch: {
    '$route'(to, from) {
      console.log("-------------------");
      console.log(to, from);
      this.searchPageType = to.query.type || this.searchPageType;
      this.$store.commit('changeSearchResultType', this.searchPageType);
      this.inputSearch = to.query.keyword || '';
      this.searchMethod = to.query.method || 1;
      this.searchKeywords = to.query.keyword || '';

      if (from.query.type && to.query.type != from.query.type) {
        this.searchSort = 2;
      }
      this.requestQueryBid(to.query.method, to.query.page == from.query.page);
      if (this.searchPageType == 2) {
        console.log("qingchufangfaaaaaaaaaaaaaaaaaaaaaaaaaa");
        this.$request.clearSubscribeNum();
      }
    },
    inputSearch(newVal) {
      let inputMaxLength = 164;
      if (newVal.length > inputMaxLength) {
        this.inputSearch = newVal.substr(0, inputMaxLength)
      }
    },
    regionList() {
      this.computedSearchScreenHeight();
      this.requestQueryBid();
    },
    secondItemList() {
      this.computedSearchScreenHeight();
    }
  },
  methods: {

    exportSubscribeMessage(type = 1) {//type导出类型  1普通筛选导出  2我的订阅导出
      if (type == 1) {
        let loading = this.$loading(this.utils.defaultLoadingOptions);
        this.$request.queryMemberStatus().then(res => {
          console.log('获取会员到期时间', res);
          if (res.status == 200) {
            if (res.data && !res.data.isExpire) {
              if (this.listPageTotal && this.listPageTotal <= 10000) {
                let data = this.searchBaseParams();
                this.$request.exportSubscribeMessage({
                  exportType: type,
                  searchType: this.searchMethod,
                  ...data
                }).then(res => {
                  console.log('订阅标讯数据导出', res)
                  if (res.status) {
                    this.requestError(res.status, res.message);
                  } else if (res) {
                    loading.close();
                    let date = new Date();
                    const fileName =
                      '订阅标讯数据导出' +
                      '_' +
                      date.getFullYear() +
                      '-' +
                      (date.getMonth() + 1) +
                      '-' +
                      date.getDate() +
                      `.xlsx`;
                    var blob = new Blob([res], {
                      type: 'application/vnd.ms-excel;charset=UTF-8'
                    });
                    // console.log(blob)
                    if (window.navigator.msSaveBlob) {
                      window.navigator.msSaveBlob(blob, fileName);
                    } else {
                      window.URL = window.URL || window.webkitURL;
                      let downloadUrl = window.URL.createObjectURL(blob);
                      let downloadLink = document.createElement('a');
                      downloadLink.href = downloadUrl;
                      downloadLink.download = fileName;
                      document.body.appendChild(downloadLink);
                      downloadLink.click();
                      document.body.removeChild(downloadLink);
                    }
                  } else {
                    this.$message({
                      type: 'warning',
                      message: '请求数据异常，请稍后重试！'
                    });
                  }

                }, err => {
                  console.log(err);
                  this.requestFail(err);
                });
              } else {
                loading.close();
                this.$message({
                  type: 'warning',
                  message: '单次最多支持导出10000条数据，请先进行筛选'
                });
              }
            } else {
              loading.close();
              this.openMemberDialogShow = true;
            }
          } else {
            this.requestError(res.status, res.message);
          }
        }, err => {
          console.log(err);
          this.requestFail(err);
        });
      }
    },
    inputKeyup(e) {
      console.log(e);
      if (e.keyCode == 40) {
        // console.log('按下了');
        if (this.searchHistoryIndex + 1 < this.searchHistory.length) {
          this.searchHistoryIndex += 1;
        } else {
          this.searchHistoryIndex = 0;
        }
        this.inputSearch = this.searchHistory[this.searchHistoryIndex].text;

      } else if (e.keyCode == 38) {
        // console.log('按上了');
        if (this.searchHistoryIndex > 0) {
          this.searchHistoryIndex -= 1;
        } else {
          this.searchHistoryIndex = this.searchHistory.length - 1;
        }
        this.inputSearch = this.searchHistory[this.searchHistoryIndex].text;
      }
    },
    clickInputSearch() {
      this.searchHistoryShow = true;
    },
    inputSearchBlur() {
      setTimeout(() => {
        this.searchHistoryShow = false;
      }, 500)
    },
    searchHistoryMouseover(index) {
      this.searchHistoryIndex = index;
    },
    searchHistoryClick(text) {
      this.inputSearch = text;
      this.updateQuery(this.searchMethod);
    },
    // 清除历史记录
    clearRecord() {
      localStorage.setItem('searchHistory', '[]')
      this.searchHistory = []
    },
    closeMemberDialogBox(res) {
      this.openMemberDialogShow = false;
      if (res.confirm) {
        this.openMemberDialogShow = false;
        this.$store.commit('changeOpenMemberShow', true);
      }
    },
    closeDialogBox(res) {
      if (res.cancel || res.close) {
        this.$message({
          type: 'info',
          message: '已取消本次操作！'
        });
      } else if (res.confirm) {
        this.$request.cancelBidAttention({
          bidId: this.preCancelBidId
        }).then(res => {
          console.log(res);
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: '已取消收藏这条标讯！'
            });
            if (this.$store.state.searchResultType == 3) {
              this.searchResultList.splice(this.preCancelBidIndex, 1);
            } else {
              this.searchResultList[this.preCancelBidIndex].isAttention = 0;
            }
          } else {
            this.requestError(res.status, res.message);
          }
        }, err => {
          console.log(err);
          this.requestFail(err);
        });
      }
      this.cancelCollectionShow = false;
    },
    computedSearchScreenHeight() {
      setTimeout(() => {
        this.$refs['screen-condition-wrap'].style.height = 'auto';
        this.screenConditionWrapMaxHeight = this.$refs['screen-condition-wrap'].offsetHeight;
        this.$refs['screen-condition-wrap'].style.height = this.screenConditionWrapMaxHeight + 'px';
      });
    },
    clearSearchCondition() {
      this.choosePurchaseIndex = [0];
      this.chooseAnnouncementIndex = [0];
      this.chooseProvincesIndex = 0;
      this.choosePurchaserIndex = 0;
      this.chooseDateIndex = 0;
      this.chooseMoneyIndex = 0;

      if (this.regionList.length !== 0) {
        this.regionList = [];
      }

      this.chooseFirstItemIndex = 0;

      if (this.secondItemList.length !== 0) {
        this.secondItemList = [];
      }

      this.chooseSecondItemIndex = [0];
      this.inputMoneyRange = [];
      this.customInputMoneyRange = [];
      this.inputDateRange = [];

      this.requestQueryBid();
    },
    collection(index, id, isCollect = false) {
      if (isCollect) {
        this.preCancelBidIndex = index;
        this.preCancelBidId = id;
        // this.$store.commit('changeDialogBoxShow',true);
        this.cancelCollectionShow = true;
      } else {
        this.$request.addBidAttention({
          bidId: id
        }).then(res => {
          console.log(res);
          if (res.status == 200) {
            this.searchResultList[index].isAttention = 1;
            this.$message({
              type: 'success',
              message: '收藏成功！'
            });
          } else {
            this.requestError(res.status, res.message);
          }
        }, err => {
          console.log(err);
          this.requestFail(err);
        });
      }
    },
    switchScreen() {
      console.log(this.$refs)
      if (this.switchScreenOpen) {
        this.$refs['screen-condition-wrap'].style.height = 0;
        this.$refs['btn-screen-icon'].setAttribute('class', 'el-icon-arrow-up transform');
      } else {
        this.$refs['screen-condition-wrap'].style.height = this.screenConditionWrapMaxHeight + 'px';
        this.$refs['btn-screen-icon'].setAttribute('class', 'el-icon-arrow-up');
      }

      this.switchScreenOpen = !this.switchScreenOpen;
    },
    selectAllRegion() {
      this.regionList = [];
    },
    provinceChange() {
      this.selectCity = '';
      this.provinceList.forEach(item => {
        if (item.value === this.selectProvince) {
          this.selectProvinceCode = item.key;
        }
      });
      this.$request.searchRegion({
        level: 2,
        parentCode: this.selectProvinceCode
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          res.data.unshift({
            key: this.selectProvinceCode,
            value: '全部'
          });
          this.cityList = res.data;
          this.cityList.forEach(item => {
            this.regionList.forEach(item2 => {
              if (item.key == item2.regionCode) {
                item.disabled = true;
              }

            })
          })
        } else {
          this.requestError(res.status, res.message);
        }
      }, err => {
        console.log(err);
        this.requestFail(err);
      })
    },
    cityChange() {
      this.cityList.forEach(item => {
        if (item.value === this.selectCity) {
          this.selectCityCode = item.key;
        }
      });
    },
    addRegion() {
      if (this.selectCity) {
        let newRegion = {};
        if (this.selectCityCode.search('0000') === -1) {//选择地级市
          newRegion = {
            regionCode: this.selectCityCode,
            regionName: this.selectCity,
            regionLevel: 2,
            parentCode: this.selectProvinceCode
          };
          this.cityList.forEach(item => {
            if (item.key.search('0000') !== -1 || item.key == this.selectCityCode) {
              item.disabled = true;
            }
          });
        } else {//选择全部
          newRegion = {
            regionCode: this.selectProvinceCode,
            regionName: this.selectProvince,
            regionLevel: 1
          };
          this.provinceList.forEach(item => {
            if (item.key == this.selectProvinceCode) {
              item.disabled = true;
            }
          });
          this.selectProvince = '';
          this.selectProvinceCode = '';
          this.cityList = [];
          this.selectCityCode = '';
        }

        this.selectCity = '';
        this.selectCityCode = '';
        this.regionList.push(newRegion);
      }
    },
    deleteRegion(index, regionLevel, code) {
      // console.log(index,regionLevel,code)
      this.regionList.splice(index, 1);
      if (regionLevel == 1) {
        this.provinceList.forEach(item => {
          if (code == item.key) {
            item.disabled = false;
          }
        })
      } else {
        this.cityList.forEach(item => {
          if (code == item.key) {
            item.disabled = false;
          }
        });

        let selectedCityList = this.cityList.filter(item => {
          return item.disabled;
        });
        console.log(selectedCityList);
        if (selectedCityList.length <= 1) {
          this.cityList[0].disabled = false;
        }
      }
    },
    displaySubscriber() {
      this.showSubscriber()
    },
    tabPageType(pageType = 1) {
      this.$router.push({
        name: 'searchResult',
        query: {
          type: pageType
        }
      })

    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listPageNum = val;
      this.updateQuery(this.searchMethod);

      this.$refs['search-result-wrap'].scrollIntoView({
        behavior: "instant",
        block: "start",
        inline: "nearest"
      });
      // console.log(this.$refs['search-result-wrap']);
    },
    screenChooseSingle(type, index, range) {//多选
      if (type === 1 || type === 2 || type === 7) {//采购方式、公告类型、二级品目
        let key = type == 1 ? 'choosePurchaseIndex' : type === 2 ? 'chooseAnnouncementIndex' : 'chooseSecondItemIndex';
        if (index == 0) {
          this[key] = [];
          this[key].push(index)
        } else {
          if (this[key].includes(index)) {
            if (this[key].length === 1) {
              this[key] = [0];
            } else {
              this[key] = this[key].filter(function (ele) {
                return ele != index && ele != 0;
              });
            }

          } else {
            this[key].push(index);
            this[key] = this[key].filter(function (ele) {
              return ele != 0;
            });
          }
        }
      } else if (type === 3) {//日期
        const end = new Date();
        const start = new Date();
        if (range === -1) {
          this.inputDateRange = [];
        } else {
          start.setTime(start.getTime() - 3600 * 1000 * 24 * range);
          this.inputDateRange = [this.utils.formatDate(start).substr(0, 10), this.utils.formatDate(end).substr(0, 10)];
        }
        // console.log(this.inputDateRange);
        this.chooseDateIndex = index;

      } else if (type === 4) {//采购人
        this.choosePurchaserIndex = index;
      } else if (type === 5) {//总金额
        this.chooseMoneyIndex = index;
        // console.log(range);
        this.inputMoneyRange = range;
        this.customInputMoneyRange = [];
      } else if (type === 6) {//一级品目
        this.chooseFirstItemIndex = index;
        this.chooseSecondItemIndex = [0];
        this.secondItemList = this.itemTop2List[index].children;
      }
      this.requestQueryBid();
    },
    customMoney() {
      this.chooseMoneyIndex = -1;
      if (parseInt(this.customInputMoneyRange[0]) > parseInt(this.customInputMoneyRange[1])) {
        this.inputMoneyRange = this.customInputMoneyRange.reverse();
      } else {
        this.inputMoneyRange = this.customInputMoneyRange
      }
      console.log(this.inputMoneyRange);
      this.requestQueryBid();
    },
    searchSortMethod(sort = 1) {
      if (this.searchSort !== sort) {
        this.searchSort = sort;
        this.listPageNum = 1;
        this.updateQuery(this.searchMethod);
      }
    },
    goDetail(id) {
      // console.log(id);
      let {href} = this.$router.resolve({
        name: 'bidDetail',
        query: {
          id
        }
      });
      window.open(href, '_blank')
    },
    // 更新数据
    updateQuery(method) {
      if (method !== this.searchMethod) {
        this.searchMethod = method;
      }
      if (this.$route.query.type !== this.searchPageType) {
        this.searchPageType = this.$store.state.searchResultType;
      }

      if (
        this.$route.query.keyword !== this.inputSearch
        ||
        this.$route.query.method !== this.searchMethod
        ||
        this.$route.query.type !== this.searchPageType
        ||
        this.$route.query.page !== this.listPageNum
        ||
        this.$route.query.sort !== this.searchSort
      ) {
        this.$refs['search-input'].blur();
        this.$router.push({
          name: this.$route.name,
          query: {
            type: this.$store.state.searchResultType,
            keyword: this.inputSearch,
            method: this.searchMethod,
            sort: this.searchSort,
            page: this.listPageNum
          }
        });

        document.title = this.inputSearch + '_搜索结果' + this.utils.defaultTitleEnd;
      }
      // this.searchKeywords = this.inputSearch;
    },
    searchBaseParams() {
      let purchaseTypeNameList = [];
      this.choosePurchaseIndex.forEach(item => {
        if (item !== 0) {
          purchaseTypeNameList.push(this.purchaseOptions[item])
        }
      });
      let announcementTypeNameList = [];
      this.chooseAnnouncementIndex.forEach(item => {
        if (item !== 0) {
          announcementTypeNameList.push(this.announcementOptions[item])
        }
      });
      let startTime = this.inputDateRange[0] ?
        this.inputDateRange[0] + ' 00:00:00' :
        null;
      let endTime = this.inputDateRange[1] ?
        this.inputDateRange[1] + ' 23:59:59' :
        null;

      let lowBidMoney = this.inputMoneyRange[0] ? this.inputMoneyRange[0] * 10000 * 100 : null;
      let highBidMoney = this.inputMoneyRange[1] ? this.inputMoneyRange[1] * 10000 * 100 : null;
      let level2ItemCodeList = [];
      this.chooseSecondItemIndex.forEach(item => {
        if (item !== 0) {
          level2ItemCodeList.push(this.secondItemList[item].code);
        } else {
          this.secondItemList.forEach(item => {
            level2ItemCodeList.push(item.code);
          });
        }
      });
      return {
        queryText: this.inputSearch.trim().substr(0, 38),
        purchaseTypeNameList,
        announcementTypeNameList,
        startTime,
        endTime,
        lowBidMoney,
        highBidMoney,
        regionList: this.regionList,
        level2ItemCodeList: this.chooseFirstItemIndex !== 0 ? level2ItemCodeList : null,
        sort: this.searchSort
      }
    },
    // 请求数据
    async requestQueryBid(method, resetPage = true, customDate = false) {//标讯搜索
      // this.updateQuery();
      this.searchKeywords = this.inputSearch;
      this.listPageNum = resetPage ? 1 : this.listPageNum;
      this.chooseDateIndex = customDate ? -1 : this.chooseDateIndex;
      this.searchResultList = [];
      this.listPageTotal = null;
      this.loading = true;


      // 获取key
      const res = await this.$request.querySignParam()
      if (res.status !== 200) return
      let dataTemp = res.data
      // 获取加密key和时间戳
      let pageNumSign = jiami.AES_jiami((this.listPageNum - 1).toString(), dataTemp.key)
      let temp = pageNumSign + this.listPageSize + dataTemp.timestamp + dataTemp.salt
      let sign = jiami.MD5_jiami(temp.toString())
      let data = {
        pageNum: this.listPageNum - 1,
        pageSize: this.listPageSize,
        pageNumSign: pageNumSign,   // 加密后的pageNum
        sign: sign,  // 加密后的参数
        timestamp: dataTemp.timestamp,  // 时间戳
        ...this.searchBaseParams()
      }

      let searchPageType = this.$store.state.searchResultType;

      if (searchPageType == 1) {
        if (this.searchMethod == 1) {
          this.$request.queryBidTitle(data).then(res => {//标题搜索
            console.log(res);
            this.loading = false;
            if (res.status == 200) {
              if (res.data) {
                this.searchResultList = res.data.content;
                this.listPageTotal = res.data.totalElements;
              } else {
                this.searchResultList = [];
                this.listPageTotal = 0;
              }

            } else {
              this.requestError(res.status, res.message);
            }
          }, err => {
            this.loading = false;
            this.requestFail(err);
          })
        } else {
          this.$request.queryBidContent(data).then(res => {//全文搜索
            console.log(res);
            this.loading = false;
            if (res.status == 200) {
              if (res.data) {
                this.searchResultList = res.data.content;
                this.listPageTotal = res.data.totalElements;
              } else {
                this.searchResultList = [];
                this.listPageTotal = 0;
              }

            } else {
              this.requestError(res.status, res.message);
            }
          }, err => {
            this.loading = false;
            this.requestFail(err);
          })
        }
      } else if (searchPageType == 2) {//我的订阅
        if (this.searchMethod == 1) {
          this.$request.queryBidTitleInSubscribe(data).then(res => {//标题搜索
            console.log(res);
            this.loading = false;
            if (res.status == 200) {
              this.$store.commit('changeSubscriberMessageNum', 0);
              if (res.data) {
                this.searchResultList = res.data.content;
                this.listPageTotal = res.data.totalElements;
              } else {
                this.searchResultList = [];
                this.listPageTotal = 0;
              }

            } else {
              this.requestError(res.status, res.message);
            }
          }, err => {
            this.loading = false;
            this.requestFail(err);
          })
        } else {
          this.$request.queryBidContentInSubscribe(data).then(res => {//全文搜索
            console.log(res);
            this.loading = false;
            if (res.status == 200) {
              this.$store.commit('changeSubscriberMessageNum', 0);
              if (res.data) {
                this.searchResultList = res.data.content;
                this.listPageTotal = res.data.totalElements;
              } else {
                this.searchResultList = [];
                this.listPageTotal = 0;
              }

            } else {
              this.requestError(res.status, res.message);
            }
          }, err => {
            this.loading = false;
            this.requestFail(err);
          })
        }
      } else if (searchPageType == 3) {//我的收藏
        if (this.searchMethod == 1) {
          this.$request.queryBidTitleInAttention(data).then(res => {//标题搜索
            console.log(res);
            this.loading = false;
            if (res.status == 200) {
              if (res.data) {
                this.searchResultList = res.data.content;
                this.listPageTotal = res.data.totalElements < 10000 ? res.data.totalElements : 10000;
                /*this.searchResultList.forEach(item=>{
                    item.isCollect = true;
                })*/
              } else {
                this.searchResultList = [];
                this.listPageTotal = 0;
              }

            } else {
              this.requestError(res.status, res.message);
            }
          }, err => {
            this.loading = false;
            this.requestFail(err);
          })
        } else {
          this.$request.queryBidContentInAttention(data).then(res => {//全文搜索
            console.log(res);
            this.loading = false;
            if (res.status == 200) {
              if (res.data) {
                this.searchResultList = res.data.content;
                this.listPageTotal = res.data.totalElements;
              } else {
                this.searchResultList = [];
                this.listPageTotal = 0;
              }

            } else {
              this.requestError(res.status, res.message);
            }
          }, err => {
            this.loading = false;
            this.requestFail(err);
          })
        }
      }

      if (this.inputSearch.trim()) {
        this.searchHistory = this.searchHistory.filter(item => {
          return item.text != this.inputSearch;
        });
        this.searchHistory.unshift({
          key: this.utils.getTimestamp(),
          text: this.inputSearch
        });
        localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory.slice(0, 100)));
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  background-color: #ffffff;
  padding-bottom: 64px;

  .search-wrap {
    .size(100%, 110px);
    .min-width(1200px);
    background-color: #f5f5fb;

    .search-box {
      .size(1200px);
      .center(auto-x);
      position: relative;

      .search {
        .clearfix;
        .height(42px);
        /*overflow: hidden;*/
        .fz(18px);
        .center(known-y, 42px);
        left: 110px;

        & > div {
          .fl;
        }

        .input-wrap {
          .size(440px);
          border: 2px solid @main-color;
          border-right: none;
          .border-radius(4px 0 0 4px);
          background-color: #ffffff;
          position: relative;

          i.icon-search {
            display: inline-block;
            .size(56px);
            /*background: url("../assets/img/search-result_icon-search.png");*/
            .bg("@{img-base-url}search-result_icon-search.png");
            background-size: auto;
            vertical-align: middle;
          }

          input {
            .size(375px);
            border: none;
            outline: none;
            vertical-align: middle;
            background-color: transparent;
          }

          #query-search {
            .size(442px, auto);
            position: absolute;
            left: -2px;
            top: 40px;
            background-color: #ffffff;
            z-index: 100;
            border: 2px solid #F67B14;
            border-top: none;
            cursor: pointer;
            .fz(14px);
            line-height: 26px;

            & > li {
              padding: 0 5px;
              .ellipsis;

              &.active {
                background-color: #F7982B;
              }
            }
          }
        }

        .btn {
          .size(102px);
          .center(text-x);
          .lh(42px);
          .color(#ffffff);

          &.btn-search-title {
            background-color: #FFBA00;
            cursor: pointer;
          }

          &.btn-search-all {
            background-color: @main-color;
            cursor: pointer;
            .border-radius(0 4px 4px 0);
          }
        }

        .btn-screen {
          .lh(42px);
          margin-left: 20px;
          cursor: pointer;

          i {
            .transition(1s);

            &.transform {
              transform: rotateZ(180deg);
              .transition(1s)
            }
          }
        }

        .clear-search-condition {
          .lh(42px);
          margin-left: 21px;
          .color(#999999);
          .fz(14px);
          cursor: pointer;
        }
      }

      .keywords {
        .fz(14px);
        margin-top: 30px;
        text-align: left;
        position: absolute;
        top: 56px;
        left: 110px;
      }
    }
  }

  .screen-condition-wrap {
    .size(1200px, auto);
    .center(auto-x);
    border: 1px solid #E6E6E6;
    padding: 0 12px 0 9px;
    margin-top: 26px;
    overflow: hidden;
    .transition(1s);

    .screen-condition {
      padding: 20px 0;
      .clearfix;

      & + .screen-condition {
        border-top: 1px dotted #E6E6E6;
      }

      .condition-title {
        .width(86px);
        .fz(16px);
        .color(#757575);
        .fl;
        .lh(22px);
        text-align: right;
      }

      ul.screen-condition-list {
        @mt: 14px;
        @ml: 15px;
        .fl;
        .fz(14px);
        .max-width(1080px);
        margin-top: -@ml;
        //margin-left: -@ml;

        & > li {
          .fl;
          .lh(22px);
          padding: 0 5px;
          margin-left: @ml;
          margin-top: @ml;
          cursor: pointer;

          &.date-picker-wrap {
            .height(auto);
            margin-top: 10px;
          }

          &.money-custom {
            margin-top: 12.5px;
            .height(auto);

            input {
              .size(160px, 26px);
              border: 1px solid @main-color;
              .border-radius(2px);
              outline: none;
              .center(text-x);
              .beauty-placeholder(custom, color, #C0C4CC);
            }
          }

          &.active {
            background-color: @main-color;
            .color(#ffffff);
            .border-radius(2px);
            /*cursor: default;*/

            &.confirm-date {
              margin-left: 20px;
              cursor: pointer;
            }
          }
        }

      }

      &.select-region {

        .select-region-wrap {
          .width(1080px);
          .fl;
          padding-left: 15px;

          .all {
            .fz(14px);
            margin-right: 10px;
            padding: 0 5px;
            cursor: pointer;

            &.active {
              background-color: @main-color;
              .color(#ffffff);
              .border-radius(2px);
              cursor: default;
            }
          }

          i.icon-plus {
            .size(14px, 14px);
            .bg('@{img-base-url}subscriber_icon-add.png');
            vertical-align: middle;
            margin-left: 10px;
            cursor: pointer;
            .color(@main-color);
          }

          button.add-condition {
            padding: 2px 10px;
            background-color: @main-color;
            .color(#ffffff);
            .border-radius(2px);
            font-family: AlibabaPuHuiTiR;
            .fz(14px);
            margin-left: 10px;
          }

          .btn-keywords-item {
            display: inline-block;
            padding: 7px 10px;
            //background-color: @main-color;
            border: 1px solid @main-color;
            .border-radius(4px);
            vertical-align: middle;
            .color(@main-color);
            line-height: 1;
            .fz(14px);
            box-sizing: border-box;

            &:nth-of-type(1) {
              margin-left: 20px;
            }

            margin-left: 10px;

            .icon-delete-keywords {
              .fz(10px);
              font-weight: bold;
              cursor: pointer;
            }
          }
        }

      }
    }
  }

  .search-result-wrap {
    .size(1200px);
    .center(auto-x);
    margin-top: 20px;

    .top {
      .clearfix;
      .size(100%, 50px);
      border: 1px solid #E6E6E6;

      .content-nav {
        .fl;
        margin-left: 21px;
        .fz(18px);

        & > li {
          .fl;
          padding: 0 24px;
          .lh(50px);
          position: relative;
          cursor: pointer;

          & + li {
            margin-left: 32px;
          }

          &:hover {
            .color(@main-color);
          }

          &.active {
            .color(@main-color);
            cursor: default;

            &:after {
              display: block;
              position: absolute;
              left: 0;
              bottom: 2px;
              width: 100%;
              height: 1px;
              background-color: @main-color;
              content: '';
            }
          }

          &:nth-of-type(2) {
            span {
              vertical-align: middle;
            }

            i {
              .size(13px, 15px);
              .bg('@{img-base-url}search-result_icon-sort-normal.png');
              margin-left: 8px;
            }

            &:hover {
              i {
                .bg('@{img-base-url}search-result_icon-sort-active.png');
              }
            }

            &.active {
              i {
                .bg('@{img-base-url}search-result_icon-sort-active.png');
              }
            }
          }
        }
      }

      .data-export {
        .fr;
        line-height: 50px;
        margin-right: 20px;
        cursor: pointer;
        color: @main-color;
      }

      .order-select {
        .fr;
        .fz(14px);
        .lh(50px);

        & > li {
          .fl;
          margin-right: 31px;
          cursor: pointer;

          &.active {
            .color(@main-color);
            cursor: default;
          }
        }
      }
    }

    ul.search-result {
      .min-height(300px);

      & > li {
        position: relative;
        padding: 30px 20px;
        border-bottom: 1px solid #EBEBEB;

        &.no-result {
          border: none;
          text-align: center;
          margin-top: 100px;
          .fz(18px);
          .color(#757575);
          line-height: 50px;

          i {
            &.icon-subscriber {
              .size(20px, 20px);
              .bg('@{img-base-url}subscriber_icon-shopping-active.png');
            }

            &.icon-heart {
              .size(17px, 15px);
              .bg('@{img-base-url}search-result_icon-heart-active-empty.png');
            }

            & + span {
              .color(@main-color);
              cursor: pointer;
            }
          }
        }

        .collection {
          position: absolute;
          top: 30px;
          right: 20px;
          .color(#888888);
          .fz(16px);
          cursor: pointer;

          i {
            display: inline-block;
            .size(16px, 12px);
            /*background: url("../assets/img/search-result_icon-heart.png");*/
            .bg("@{img-base-url}search-result_icon-heart.png");
            vertical-align: middle;
            margin-right: 2px;
          }

          &.active {
            .color(@main-color);

            i {
              .bg("@{img-base-url}search-result_icon-heart-active.png");
            }
          }

        }

        .title {
          .fz(16px);
          .max-width(1100px);
          //cursor: pointer;
          /*line-height: 25px;*/
          .ellipsis;

          a {
            text-decoration: none;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        ul.tags-list {
          @ml: 10px;
          .clearfix;
          .color(#ffffff);
          margin-left: -@ml;

          & > li {
            .fl;
            .fz(14px);
            padding: 5px 10px;
            .border-radius;
            margin-left: @ml;
            margin-top: 20px;

          }
        }

        .content {
          .fz(14px);
          .color(#888888);
          line-height: 24px;
          margin-top: 19px;
        }

        .content-keywords {
          @ml: 34px;
          .fz(14px);
          margin-top: 19px;
          margin-left: -@ml;

          span {
            margin-left: @ml;
          }
        }
      }
    }

    .pagination-wrap {
      .clearfix;
      margin-top: 134px;
      margin-right: 20px;
    }
  }
}
</style>
<style lang="less">
#page-search-result {

  .select-region {
    .el-input {
      height: 100%;

      input {
        height: 100%;
      }

      .el-input__inner:focus {
        border-color: @main-color;
      }

      &.el-input.is-focus .el-input__inner {
        border-color: @main-color;
      }

      span.el-input__suffix {
        height: 100%;

        i {
          line-height: 26px;
        }
      }
    }
  }

  .search-result-pagination {
    .fr;
    padding: 0;

    .btn-prev, .btn-next {
      .size(79px, 36px);
      .fz(14px) !important;
      .color(#252627) !important;
      background-color: #ffffff !important;
      border: 1px solid #EBEBEB !important;

      &:disabled {
        .color(#C0C4CC) !important;
      }
    }

    .el-pager {
      li {
        .min-width(36px) !important;
        .lh(36px);
        .fz(20px);
        .color(#888888) !important;
        font-weight: lighter;
        .border-radius(4px) !important;
        background-color: #ffffff !important;
        border: 1px solid #EBEBEB !important;

        &.active {
          background-color: @main-color !important;
          .color(#ffffff) !important;
        }

        &.el-icon-more {
          border: none !important;

          &.btn-quicknext, &.btn-quicknext + li {
            display: none !important;
          }
        }

        &.el-icon-d-arrow-right, &.el-icon-d-arrow-left {
          border: none !important;
          .color(@main-color) !important;
        }
      }
    }
  }

  .date-picker-wrap {
    .height(auto);
    margin-top: 10px;

    .el-date-editor {
      border: none;

      i.el-icon-date {
        display: none;
      }

      .el-range-separator {
        display: inline-block;
        .width(32px);
        .fz(14px);
        padding: 0 9px;
      }

      .el-range-input {
        .size(160px, 26px);
        border: 1px solid @main-color;
        .border-radius(2px);
      }
    }
  }
}

.search-result-date-picker-1 {
  @main-color: #F67B14;

  .el-date-table {
    td {
      &:hover {
        span {
          .color(@main-color) !important;
        }
      }

      &.today {
        span {
          .color(@main-color) !important;
        }
      }

      &.start-date {
        span {
          background-color: @main-color !important;
          .color(#ffffff) !important;
        }
      }

      &.end-date {
        span {
          background-color: @main-color !important;
          .color(#ffffff) !important;
        }
      }

      &.in-range {
        div {
          background-color: rgba(246, 123, 20, .1) !important;
        }
      }
    }
  }
}
</style>
